<nz-card>
  <div class="mb-md">
    <label> 用户名:
      <input nz-input [(ngModel)]="this.params.username" name="username" nzPlaceHolder="请输入用户名称" style="width: 100px;"
             class="mr-sm" />
    </label>
    <label> 昵称:
      <input nz-input [(ngModel)]="this.params.nickname" name="nickname" nzPlaceHolder="请输入昵称" style="width: 100px;"
             class="mr-sm" />
    </label>
    <label> 电话号码:
      <input nz-input [(ngModel)]="this.params.phoneNum" name="phoneNum" nzPlaceHolder="请输入电话号码" style="width: 100px;"
             class="mr-sm" />
    </label>

    <button nz-button (click)="this.loadUserList()" [nzType]="'primary'">搜索</button>
    <button nz-button (click)="this.params = {};this.loadUserList()">重置</button>
  </div>

  <nz-divider [nzDashed]=true style="margin: 0;padding: 0"></nz-divider>

  <div style="padding: 10px;">
    <button nz-button (click)="openEdit()" [nzType]="'primary'">新增</button>
    <button nz-button nz-popconfirm
            nzPopconfirmTitle="确认删除选中吗?"
            nzPopconfirmPlacement="right"
            (nzOnConfirm)="deleteCheck()"
            (nzOnCancel)="cancel()">删除
    </button>
  </div>

  <nz-table #basicTable [nzData]="users" [nzLoading]="loading" nzBordered nzSize="small">
    <thead>
    <tr>
      <th>头像</th>
      <th>邮箱</th>
      <th>用户名</th>
      <th>昵称</th>
      <th>性别</th>
      <th>年龄</th>
      <th>电话</th>
      <th>操作区</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td nzAlign="center">
        <nz-avatar nzSrc="{{'api/file/view-picture/' + data?.avatarId}}" nzSize="small" class="mr-sm"></nz-avatar>
      </td>
      <td>{{data.email}}</td>
      <td>{{data.username}}</td>
      <td>{{data.nickname}}</td>
      <td>{{data.sex === 1 ? '男' : data.sex === 2 ? '女' : ''}}</td>
      <td>{{data.age}}</td>
      <td>{{data.phoneNum}}</td>
      <td>
        <a nz-button nzType="link" (click)="openEdit(data)"><i nz-icon nzType="edit"></i>编辑</a>
        <a nz-button nzType="link" (click)="delete(data.id)"><i nz-icon nzType="delete"></i>删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>
<user-list-edit #userEditComponent (voted)="onSmt()"></user-list-edit>


